<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script type="text/javascript" src="http://dyrszty.b0.upaiyun.com/zty/fangyan/js/jquery-1.11.0.js"></script>
		<script type="text/javascript" src="js/GA_NEWS_TAP_LV.js"></script>
		<script type="text/javascript" src="js/duang.js"></script>
		<link rel="stylesheet" type="text/css" href="css/duang.css" />
	</head>
	<style>
		html,
		body {
			height: 100%;
		}
		
		.book_duang {
			display: block;
			height: 90%;
			padding: 0px;
			margin: 0px;
			width: 90%;
			margin: 0 auto;
		}
		
		.book_duang li {
			width: 100%;
			height: 100%;
			list-style: none;
			position: absolute;
			-webkit-transform-origin: left center;
			-webkit-transition-property: transform;
			-webkit-transition-timing-function: ease;
		}
		
		.book_duang:hover li {
			-webkit-animation: book_duang 4s forwards;
		}
		
		@-webkit-keyframes book_duang {
			from {
				-webkit-transform: rotateY(0deg)skew(0deg, 0deg);
			}
			to {
				-webkit-transform: rotateY(120deg)skew(0deg, -10deg);
			}
		}
	</style>

	<body>
		<ul class="book_duang relative_duang">
			<li><img style="width: 100%;" src="img/TIM图片20180226151750.jpg" /></li>
			<!--<li style="background: #ff4400;"></li>
			<li style="background: blue"></li>
			<li style="background: red;"></li>-->
		</ul>
	</body>

</html>